<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_search">
					<view class="content_top_box_searchs">
						<tn-input :placeholderStyle="{ 
    fontFamily: 'PingFang SC', 
    fontWeight: '500', 
    fontSize: '24rpx', 
    color: '#999999', 
    textIndent: '100rpx' ,
	textIndent:'30rpx'
  }" placeholder="请输入劳务人员姓名/手机号" :customStyle="{ paddingLeft: '35rpx' }" v-model="value" @confirm="searchs()" />
					</view>
					<view class="content_top_box_search_btn" @click="searchs()">
						<image src="../../static/img/search.png"  style="width: 164rpx;height: 84rpx;"></image>
					</view>
				</view>

			</view>
		</view>
		<view class="content_bottom">
			<view class="content_bottom_tab">
				<view class="content_bottom_tab_btn" :class="{ 'active': tabIndex === 0 }" @tap="switchTab(0)">
					在场劳务人员
				</view>
				<view view class="content_bottom_tab_btn" :class="{ 'active': tabIndex === 1 }" @tap="switchTab(1)">
					退场劳务人员
				</view>
			</view>
			<view class="content_bottom_box" v-if="list.length>0">
			
				<view class="content_bottom_box_list"  v-for="(item,index) in list":key="index">
			
					<view class="content_bottom_box_list_left">
						<tn-avatar @click="onImageClick(item.url)" size="xl" :src="item.url"></tn-avatar>
					</view>
					<view class="content_bottom_box_list_right">
						<view class="content_bottom_box_list_right_name">
							{{item.USER_NAME}}
						</view>
						<view class="content_bottom_box_list_right_phone">
							<view class="content_bottom_box_list_right_phone_img">
								<image src="../../static/img/phone.png" mode="widthFix"
									style="width: 30rpx;vertical-align: middle;    margin-top: -5rpx;"></image>
							</view>
							<view class="content_bottom_box_list_right_phone_num">
								{{item.PHONE_NUMBER}}
							</view>

						</view>
						<view class="content_bottom_box_list_right_type">
							<view class="content_bottom_box_list_right_type_left">
								工种：{{item.GZ}}
							</view>
							<view class="content_bottom_box_list_right_type_right">
								状态 : <span v-if="item.ZT=='1'"> 进场</span> <span v-if="item.ZT=='2'"> 离场</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_bottom_box" v-else>
				 <tn-empty mode="list"></tn-empty>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, // 默认选中第一个标签页
				value: '',
				qcordshow: false,
				src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/weather/icons/a0.png',
				projectNo:'',
				zt:'1',
				list:[]
			}
		},
		onLoad(options) {
			if (options && options.projectNo) {
				this.projectNo = options.projectNo;
			
				// 在这里可以对接收到的数据进行处理
				this.getpeople();
			}
		},
		methods: {
			searchs(){
			
				this.getpeople();
			},
		
			async  getpeople(){
				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						cmd: 'com.awspaas.user.apps.sfeg.srm.supplier.personal.people',
						sid:uni.getStorageSync('SID'),
						phoneNumber: uni.getStorageSync('phoneNumber'),
						openId: uni.getStorageSync('OPEN_ID'),
						value:this.value,
						projectNo:this.projectNo,
						zt:this.zt
					};
				
					// 发送 GET 请求
					const response = await this.$get(url, params);
					if(response.result=='ok'){
							this.list = response.data;
					}else{
						this.list=[]
					}
				
					// 处理请求成功的逻辑
					console.log('请求成功111', this.list);
				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
			},
			switchTab(index) {
				console.log(index, 'index')
				this.tabIndex = index;
				if(this.tabIndex==0){
					this.zt='1';
					this.getpeople();
				}else{
					this.zt='2';
					this.getpeople();
				}
			},
			onImageClick(imageUrl) {
				console.log(imageUrl,'imageUrl')
				const current=imageUrl;
				 uni.previewImage({
				   current: current, // 当前显示图片的链接
				   // urls 数组只需要包含当前图片的URL，因为只预览一张
				   urls: [current]
				 });

			},
			// 图片预览方法
			// previewImage() {
			// 	const current = this.src;

			// 	// 使用 uni.previewImage API 预览单张图片
			// 	uni.previewImage({
			// 		current: current, // 当前显示图片的链接
			// 		// urls 数组只需要包含当前图片的URL，因为只预览一张
			// 		urls: [current]
			// 	});
			// },
			openshow() {
				this.qcordshow = true;
			},
			toteamPerson() {
				uni.navigateTo({
					url: '../../pages/teamperson/teamperson'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 64rpx 35rpx 0 35rpx;
			position: relative;

			.content_top_box_search {
				width:87%;
				position: relative;
				height: 68rpx;
				background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 51%, #FFFFFF 100%);
				border-radius: 36rpx;

				.content_top_box_search {
					text-indent: 50rpx;
					width: 100%;
					position: relative;
					height: 67rpx;

				}

				.tn-input__input {
					text-indent: 47rpx !important;
				}

			}

			.content_top_box_search_btn {
				position: absolute;
				top: -7rpx;
				right: -96rpx;
				/* height: 72rpx; */
				z-index: 9999;
			}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 200rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.content_bottom_tab {
			display: flex;
			margin: 32rpx;

			.content_bottom_tab_btn {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #3C83FD;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2px solid #3C83FD;
				padding: 27rpx 68rpx;

			}

			.content_bottom_tab_btn:first-child {
				border-right: none;
				border-bottom-right-radius: 0px;
				border-top-right-radius: 0rpx;
			}

			.content_bottom_tab_btn:last-child {

				border-bottom-left-radius: 0px;
				border-top-left-radius: 0rpx;
			}
		}

		.content_bottom_box {
			margin: 34rpx;
				padding-bottom: 120rpx;
			.content_bottom_box_list {
				margin-top: 12rpx;
				padding: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
				display: flex;
				align-items: center;
				border-radius: 16rpx;
				position: relative;


				.content_bottom_box_list_right {
					margin-left: 27rpx;

					.content_bottom_box_list_right_name {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #3A3A3A;
					}

					.content_bottom_box_list_right_phone {
						display: flex;
						margin-top: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #3C83FD;

						.content_bottom_box_list_right_phone_num {
							margin-left: 12rpx;
						}
					}

					.content_bottom_box_list_right_type {
						display: flex;
						margin-top: 30rpx;

						.content_bottom_box_list_right_type_left {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #3A3A3A;
						}

						.content_bottom_box_list_right_type_right {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #3A3A3A;
							margin-left: 100rpx;

							span {
								color: #45B423;
							}
						}

					}
				}

			}
		}





	}

	.contentpopur {
		.contentpopur_qcord {
			text-align: center;
			margin: 80rpx;
		}

		.contentpopur_xmName {
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #3A3A3A;
		}

		.contentpopur_dept {
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-top: 34rpx;
		}
	}

	.active {
		background: #3C83FD !important;

		border: 2px solid #3C83FD !important;
		color: #FFFFFF !important;
	}
</style>